<template>
    <div class="container">
        <p class="oneP">旅游行业营销诉求</p>
        <p class="twoP" style="font-weight:100">满足消费者需求、提升转化率、树立品牌口碑</p>
        <!-- <button class="oneButton" @click="$router.push({path:''})">免费咨询</button> -->
        <button class="oneButton" @click.stop="consult">免费咨询</button>
        <ul class="ul1 animation-box">
            <li :class="{'topmove':liIndex==index}" v-for="(item,index) in arr1" :key="index" :style="{background:'url('+url[index]+') no-repeat ' }" @mouseover="show(index)" @mouseout="show(5)" >
                <div  >
                    <img :src="item[0]" class="top" >
                </div>
                <div>
                    <img src="">
                    <p>{{item[2]}}</p>
                    <p>{{item[3]}}</p>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
require("../../assets/css/p.css")
const img1 = require("../../assets/img/lyzw/18.png")
const img2 = require("../../assets/img/lyzw/20.png")
const img3 = require("../../assets/img/lyzw/22.png")
const img4 = require("../../assets/img/lyzw/24.png")
const img6 = require("../../assets/img/lyzw/17.png")
const img7 = require("../../assets/img/lyzw/19.png")
const img8 = require("../../assets/img/lyzw/21.png")
const img9 = require("../../assets/img/lyzw/23.png")
const img10 = require("../../assets/img/切图/婚纱摄影行业/美辰婚纱营销优势/10.png")
import bus from '../../utils/bus'
export default {
    data(){
        return {
            arr1:[
                [img1,img6,"在线旅游快速发展","加速线上线下融合"],
                [img2,img7,"周末周边游","成常态化旅游"],
                [img3,img8,"特色目的地主题游和私人定制模式","迎合市场需求"],
                [img4,img9,"快速扩展市场","塑造品牌形象"],
            ],
            liIndex:null,
            url:[img6,img7,img8,img9]
        }
    },
    methods:{
        show(index){
            console.log(index)
            this.liIndex = index
        },
        consult(){
            bus.$emit('showConsult', true);
        }
    },
    mounted(){
        this.$el.addEventListener('click', () => {
            bus.$emit('showConsult', false)
        })
    }
}
</script>
<style scoped>
.container{
    width:1200px;
    margin: 0 auto;
    margin-top: 80px;
    overflow: hidden;
    text-align: center;
}

.ul1{
    overflow: hidden;
    margin-top: 60px;
    padding:7px;
    width:101%;
    padding:10px;
    padding-top:15px;
    position: relative;
}
.ul1>li{
    width:270px;
    text-align: center;
    height: 300px;
    float: left;
    position: relative;
    margin-left: 30px;
  box-shadow: 2px 2px 20px #ededed;
    background-position: right 10px top 20px
}

.ul1>li:first-child{
    margin-left: 0;
}
.animation-box li{
  -webkit-transition: all 0.5s, opacity 0.5s;
  transition: all 0.5s, opacity 0.5s;
}
.top{
    margin-top: 55px;
    margin-left:0%;
}
.ul1>li>div:nth-child(1)>img:nth-child(2){
    position: absolute;
    top:80px;
    left: 100px;
}
.ul1>li>div:nth-child(2){
    position: absolute;
    /* left:2%; */
    width:270px;
    bottom:10px;

}
li:nth-child(4) .top{
    margin-left:-1%;
}
.ul1>li>div:nth-child(2)>p:nth-child(2){
    margin-top: 10px;
    font-size: 16px;
    color:rgb(34, 34, 34);
}
.ul1>li>div:nth-child(2)>p:nth-child(3){
    font-size: 16px;
    color:rgb(34, 34, 34);
    margin-bottom: 45px;
    margin-top: 10px;
}
.oneButton{
    width: 140px;
    box-shadow: 0px 4px 19px #ed9191;
}
.topmove{
    transform: translateY(-10px)
    
}
</style>